<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/tailwindcss.js"></script>
	</head>
	<style>
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			border: none;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的订单</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" href="#">
						全部
					</a>
					<a class="mui-control-item" href="#">
						待付款
					</a>
					<a class="mui-control-item" href="#">
						待收货
					</a>
					<a class="mui-control-item" href="#">
						待发货
					</a>
					<a class="mui-control-item" href="#">
						已完成
					</a>
					<a class="mui-control-item" href="#">
						退款/售后
					</a>
				</div>
			</div>
			<div class="order">
				<div class="order-item">
						<a href="order-details.html">
						<div class="order-time">
							<div>
								2024-08-13 00:00:00
							</div>
							<div style="color: #ff4f00;">待付款</div>
						</div>
						<div class="mui-row ">
							<div class="mui-col-xs-3">
								<img src="images/pic_01.jpg" alt="" srcset="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9">
								<div class="goods-item-content">
									<div class="order-goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
									<div class="sku">53度黄盖 * 12瓶（整箱）</div>
									<div class="goods-price-group">
										<div><span>￥</span>
											<span class="price">399.00</span><span> X 1</span>
										</div>
									</div>
									<div style="text-align: right;margin-top: 0.625rem;">实付款：￥299.00</div>
								</div>
							</div>
							<div class="order-btn-gruop">
								<div class="mui-row">
									<div class="mui-col-xs-3" id='confirmBtn' style="color: #666666;font-size: 0.8125rem;">

									</div>
									<div class="mui-col-xs-9">
										<div style="float: right;margin-top: 0.625rem;">
											<button type="button" class="mui-btn  mui-btn-outlined"
												style="border: 1px solid #ff4f00;color: #ff4f00;">去付款</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-item">
						<a href="order-details.html">
						<div class="order-time">
							<div>
								2024-08-13 00:00:00
							</div>
							<div style="color: #ff4f00;">待发货</div>
						</div>
						<div class="mui-row ">
							<div class="mui-col-xs-3">
								<img src="images/pic_01.jpg" alt="" srcset="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9">
								<div class="goods-item-content">
									<div class="order-goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
									<div class="sku">53度黄盖 * 12瓶（整箱）</div>
									<div class="goods-price-group">
										<div><span>￥</span>
											<span class="price">399.00</span><span> X 1</span>
										</div>
									</div>
									<div style="text-align: right;margin-top: 0.625rem;">实付款：￥299.00</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-item">
						<a href="order-details.html">
						<div class="order-time">
							<div>
								2024-08-13 00:00:00
							</div>
							<div style="color: #ff4f00;">待收货</div>
						</div>
						<div class="mui-row ">
							<div class="mui-col-xs-3">
								<img src="images/pic_01.jpg" alt="" srcset="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9">
								<div class="goods-item-content">
									<div class="order-goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
									<div class="sku">53度黄盖 * 12瓶（整箱）</div>
									<div class="goods-price-group">
										<div><span>￥</span>
											<span class="price">399.00</span><span> X 1</span>
										</div>
									</div>
									<div style="text-align: right;margin-top: 0.625rem;">实付款：￥299.00</div>
								</div>
							</div>
							<div class="order-btn-gruop">
								<div class="mui-row">
									<div class="mui-col-xs-3" id='confirmBtn' style="color: #666666;font-size: 0.8125rem;">
										
									</div>
									<div class="mui-col-xs-9">
										<div style="float: right;margin-top: 0.625rem;">
											<button type="button" class="mui-btn  mui-btn-outlined"
												style="border: 1px solid #ff4f00;color: #ff4f00;">确认收获</button>
											<button type="button" class="mui-btn  mui-btn-outlined">查看物流</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-item">
						<a href="order-details.html">
						<div class="order-time">
							<div>
								2024-08-13 00:00:00
							</div>
							<div style="color: #ff4f00;">已完成</div>
						</div>
						<div class="mui-row ">
							<div class="mui-col-xs-3">
								<img src="images/pic_01.jpg" alt="" srcset="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9">
								<div class="goods-item-content">
									<div class="order-goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
									<div class="sku">53度黄盖 * 12瓶（整箱）</div>
									<div class="goods-price-group">
										<div><span>￥</span>
											<span class="price">399.00</span><span> X 1</span>
										</div>
									</div>
									<div style="text-align: right;margin-top: 0.625rem;">实付款：￥299.00</div>
								</div>
							</div>
							<div class="order-btn-gruop">
								<div class="mui-row">
									<div class="mui-col-xs-3" id='confirmBtn' style="color: #666666;font-size: 0.8125rem;">
										删除订单
									</div>
									<div class="mui-col-xs-9">
										<div style="float: right;margin-top: 0.625rem;">
										
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="order-item">
						<a href="order-details.html">
						<div class="order-time">
							<div>
								2024-08-13 00:00:00
							</div>
							<div style="color: #ff4f00;">退款 / 售后</div>
						</div>
						<div class="mui-row ">
							<div class="mui-col-xs-3">
								<img src="images/pic_01.jpg" alt="" srcset="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9">
								<div class="goods-item-content">
									<div class="order-goods-title">Cointreau君度甜橙力娇酒利口酒小酒伴50ml</div>
									<div class="sku">53度黄盖 * 12瓶（整箱）</div>
									<div class="goods-price-group">
										<div><span>￥</span>
											<span class="price">399.00</span><span> X 1</span>
										</div>
									</div>
									<div style="text-align: right;margin-top: 0.625rem;">实付款：￥299.00</div>
								</div>
							</div>
							<div class="order-btn-gruop">
								<div class="mui-row">
									<div class="mui-col-xs-3" id='confirmBtn' style="color: #666666;font-size: 0.8125rem;">
										删除订单
									</div>
									<div class="mui-col-xs-9">
										<div style="float: right;margin-top: 0.625rem;">
											<button type="button" class="mui-btn  mui-btn-outlined">申请售后</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			document.getElementById("confirmBtn").addEventListener('tap', function() {
				var btnArray = ['否', '是'];
				mui.confirm('是否删除订单？', '温馨提示', btnArray, function(e) {
					if (e.index == 1) {
						console.log("是")
					} else {
						console.log("否")
					}
				})
			});
		</script>
	</body>

</html>